<template>
  <div class="business-store-list">
    <!-- 头部 -->
    <div class="app-main-content-box">
      <div class="flexRBC">
        <div class="list-search">
          <el-input
            v-model="filterForm[searchSelect]"
            placeholder="请输入内容"
            class="input-with-select"
            @keyup.enter.native="searchByKeyword"
          >
            <el-select
              slot="prepend"
              v-model="searchSelect"
              placeholder="请选择"
            >
              <el-option
                v-for="item in selectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-input>
          <el-button
            type="primary"
            size="medium"
            :loading="searchLoading"
            round
            icon="el-icon-search"
            @click="searchByKeyword"
            >查 询</el-button
          >
        </div>
        <el-button
          v-if="!$store.getters.banBtnList.includes('BTN_BRANCH_ADD')"
          type="primary"
          size="medium"
          round
          @click="goBusinessStoreAdd"
          >新增门店</el-button
        >
      </div>

      <div class="content">
        <!-- 筛选 -->
        <!-- <div class="app-main-filter-collapse-box">
          <el-collapse>
            <el-collapse-item title="按条件筛选" name="1">
              <div>
                <el-form ref="ruleForm" label-width="120px" size="mini">
                  <el-form-item label="筛选类型："></el-form-item>
                  <el-form-item size="large">
                    <el-button
                      type="primary"
                      size="mini"
                      @click="submitForm('ruleForm')"
                    >筛选</el-button>
                    <el-button size="mini" @click="resetForm('ruleForm')">重置</el-button>
                  </el-form-item>
                </el-form>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>-->
        <!-- 表格内容 -->
        <div class="list-table">
          <el-table
            v-loading="tableLoading"
            :data="list"
            border
            stripe
            style="width: 100%"
            empty-text="暂无数据"
          >
            <el-table-column label="LOGO" width="70" fixed>
              <template slot-scope="scope">
                <div class="table-avatar">
                  <img
                    v-if="scope.row.icon"
                    :src="fileBaseUrl + scope.row.icon"
                    alt
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="门店名称" fixed />
            <el-table-column prop="serial" label="门店编号" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="mobilePhone" label="门店电话" />
            <el-table-column
              v-if="!$store.getters.banBtnList.includes('BTN_BRANCH_EDIT')"
              label="操作"
              width="100"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button
                  v-if="
                    userInfo.shopId === 0 || scope.row.id === userInfo.shopId
                  "
                  type="text"
                  size="mini"
                  @click="goBusinessStoreEdit(scope.$index, scope.row)"
                  >修改配置</el-button
                >
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total !== 0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getShopList } from '@/api/shop'
export default {
  data() {
    return {
      // 配置
      selectOptions: [
        {
          value: 'name',
          label: '门店名称'
        },
        {
          value: 'serial',
          label: '门店编号'
        }
      ],
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      searchSelect: 'name', // 搜索的类型
      // 状态
      tableLoading: false, // 表格loading
      searchLoading: false, // 表格loading
      // 数据
      list: [], // 表格数据
      // 筛选数据
      filterForm: {
        name: '',
        serial: ''
      }
    }
  },
  watch: {
    searchSelect(val) {
      this.filterForm.serial = ''
      this.filterForm.name = ''
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'userInfo'])
  },
  mounted() {
    this.initData()
  },
  methods: {
    /**
     * 获取数据
     */
    // 获取门店数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      // 加入page
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      this.tableLoading = true
      getShopList(params).then((res) => {
        this.tableLoading = false
        this.searchLoading = false
        this.list = res.data.list
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange(page) {
      console.log('page', page)
      this.initData()
    },

    /**
     * 按钮组
     */
    // 点击搜索
    searchByKeyword() {
      this.searchLoading = true
      this.initData(1)
    },

    // 点击新增
    goBusinessStoreAdd() {
      this.$router.push({
        name: 'BusinessStoreAdd'
      })
    },

    // 跳转详情
    goBusinessStoreEdit(index, row) {
      this.$router.push({
        name: 'BusinessStoreEdit',
        params: { id: JSON.stringify(row) }
      })
    },

    // 筛选
    submitForm(formName) {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.business-store-list {
  /* 搜索*/
  .list-search {
    .el-select {
      width: 120px;
    }
    .el-input {
      width: 400px;
      margin-right: 10px;
    }
  }
  /* 表格 */
  .content {
    margin-top: 10px;
    .list-table {
      .table-avatar {
        overflow: hidden;
        width: 30px;
        height: 30px;
        border: 1px solid #f7f7f7;
        border-radius: 50%;
      }
    }
  }
}
</style>
